<template>
  <view class="container">
    <sc-navbar back title="骨板组详情"></sc-navbar>
    <glo-gutter>
      <view class="detail-img">
        <sc-image height="100%" src="/static/imgs/empty.png" width="100%"></sc-image>
      </view>
      <glo-chunk>
        <glo-title title="骨板组详细信息"></glo-title>
        <sc-view mt="15">
          <glo-info :info="getInfo(detailData.info)" font-size="24" line-height="49"></glo-info>
        </sc-view>
      </glo-chunk>
      <glo-include name="所含商品" :count="`共${detailData.list.length}件商品`">
        <view class="product-item" v-for="item in detailData.list" :key="item.id">
          <sc-flex ai="center" col-gap="22">
            <glo-title :title="item.productName"></glo-title>
            <glo-tag :text="ProductStatusLabel[item.nailboxStatus]"></glo-tag>
          </sc-flex>
          <sc-flex col-gap="33" mt="15" ai="center">
            <sc-image :src="item.nailboxImageAddress" width="90" height="90"></sc-image>
            <glo-info :info="getProductInfo(item)"></glo-info>
          </sc-flex>
        </view>
      </glo-include>
    </glo-gutter>
    <sc-flex col-gap="20" jc="center" padding="90rpx 0 30rpx">
      <sc-button height="75" text="上传合格证" type="white" width="262"></sc-button>
    </sc-flex>
  </view>
</template>
<script setup>
import { ProductStatusLabel } from "@/commons/enums";
import { useTemporaryStore } from "@/store/temporary";
const temporaryStore = useTemporaryStore();

const detailData = reactive({
  info: {},
  list: [],
});
const getInfo = (item) => {
  return [
    {
      type: "single",
      label: "序号",
      value: item.serialNumber || "-",
    },
    {
      type: "single",
      label: "骨板（棒）编号",
      value: item.boardCode || "-",
    },
    {
      type: "single",
      label: "所含数量",
      value: item.containCount || "-",
    },
    {
      type: "single",
      label: "骨板（棒）条码",
      value: item.boardBarcode || "-",
    },
  ];
};
const getProductInfo = (item) => {
  return [
    {
      type: 'multiple',
      columns: '273rpx 1fr',
      list: [
        {
          label: "商品编号",
          value: item.id || "-",
        },
        {
          label: "数量",
          value: item.containCount || "-",
        },
      ]
    },
    {
      type: 'multiple',
      columns: '273rpx 1fr',
      list: [
        {
          label: "规格",
          value: item.specifications || "-",
        },
        {
          label: "型号",
          value: item.model || "-",
        },
      ]
    },
    {
      type: 'multiple',
      columns: '273rpx 1fr',
      list: [
        {
          label: "批号",
          value: item.productBatchNumber || "-",
        },
        {
          label: "追踪码",
          value: item.trackingCode || "-",
        },
      ]
    },
    {
      type: 'multiple',
      columns: '273rpx 1fr',
      list: [
        {
          label: "生产日期",
          value: item.productionDate || "-",
        },
        {
          label: "生产效期",
          value: item.validityDate || "-",
        },
      ]
    },
    {
      type: 'multiple',
      columns: '273rpx 1fr',
      list: [
        {
          label: "注册证号",
          value: item.registrationCertificateNumber || "-",
        },
        {
          label: "商品来源",
          value: item.productSource || "-",
        },
      ]
    },
    {
      type: "single",
      label: "厂商名称",
      value: item.manufacturerName || "-",
    },
    {
      type: "single",
      label: "UDI条码",
      value: item.udiCode || "-",
    },
  ];
};
onLoad(() => {
  const data = temporaryStore.guBanZuProduct;
  detailData.info = data;
  detailData.list = data.productEntityManagementRespVOList;
});

</script>
<style lang="scss">
page {
  background: $color-bg;
}
</style>
<style lang="scss" scoped>
.detail-img {
  width: 100%;
  height: 778rpx;
  border-radius: 8rpx;
}

.detail-info {
  padding: 17rpx 25rpx 58rpx;
  border-radius: 15rpx;
  background: #ffffff;

  .info-item {
    color: #767676;
    font-weight: 400;
    font-size: 26rpx;
    font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
    line-height: 49rpx;
  }
}

.product-item {
  padding: 17rpx 24rpx 24rpx;
  background: #ffffff;
  border-radius: 15rpx 15rpx 15rpx 15rpx;
  border: 2rpx solid #f3f3f3;
}
</style>
